<template>
<view class="room_bar">
	<chatSuitEmoji ref="chatSuitEmoji" @newEmojiStr="emojiAction"></chatSuitEmoji>
	<chatSuitMain ref="chatSuitMain" :username="username" :chatType="chatType" @inputFocused="cancelEmoji" v-on:pChangeType="changeType"></chatSuitMain>
	<chatSuitImage ref="chatSuitImage" :username="username" :chatType="chatType"></chatSuitImage>
<!-- 	<chat-suit-location id="chat-suit-location" username="{{ username }}"></chat-suit-location>
	<!-- <chat-suit-video ref="chatSuitVideo" :username="username"></chat-suit-video> -->
	
	<view :class="'other_func ' + (isIPX? 'other_func_X': '')" v-show="ishow">
		<!-- <view class="open_emoji" @tap="openEmoji">
			<image src="/static/images/Emoji.png" style="height:18px; width: 19px"/>
		</view>
		<view class="v-record" @tap="toggleRecordModal">
			<image class="icon-record" 
        src="../../../static/images/voice.png" 
        style="height:20px; width: 20px">
      </image>
		</view> -->
		<view class="send_image" @tap="openCamera">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="background-color: #FFFFFF;padding: 10px;border-radius: 10px;">
					<image src="/static/zhuanicon/paishe.png" style="height:40px; width: 40px"></image>
				</view>
				<text class="texticon">拍摄</text>
			</view>
		</view>
		<view class="send_image" @tap="sendImage">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="background-color: #FFFFFF;padding: 10px;border-radius: 10px;">
					<image src="/static/zhuanicon/img.png" style="height:40px; width: 40px"></image>
				</view>
				<text class="texticon">相册</text>
			</view>
		</view>
		<view class="send_image" @tap="sendRed">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="background-color: #FFFFFF;padding: 10px;border-radius: 10px;">
					<image src="/static/zhuanicon/jifenhongbao.png" style="height:40px; width: 40px"></image>
				</view>
				<text class="texticon">红包</text>
			</view>
		</view>
		<view class="send_image" @tap="sendMoney">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view style="background-color: #FFFFFF;padding: 10px;border-radius: 10px;">
					<image src="/static/zhuan.png" style="height:40px; width: 40px"></image>
				</view>
				<text class="texticon">转账</text>
			</view>
		</view>
		<!-- <view class="send_image" @tap="sendVideo">
			<image src="/static/images/video.png" style="height:20px; width: 20px"></image>
		</view> -->
		<!-- <view class="send_image" bind:tap="sendLocation">
			<image src="../../../static/images/iconLocation@2x.png" style="height:18px;"/>
		</view> -->
	</view>
</view>
</template>

<script>
let RecordStatus = require("./suit/audio/record_status").RecordStatus;
let msgType = require("../msgtype");
import chatSuitEmoji from "./suit/emoji/emoji";
import chatSuitImage from "./suit/image/image";
import chatSuitLocation from "./suit/location/location";
import chatSuitMain from "./suit/main/main";
// import chatSuitVideo from "./suit/videoComp/videoComp"

export default {
  data() {
    return {
	  ishow:false,
      recordStatus: RecordStatus.HIDE,
      RecordStatus,
      __comps__: {
        main: null,
        emoji: null,
        image: null,
        location: null,
        video: null,
      },
      isIPX: ""
    };
  },

  components: {
    chatSuitEmoji,
    chatSuitImage,
    chatSuitLocation,
    chatSuitMain,
    // chatSuitVideo
  },
  props: {
    username: {
      type: Object,
      default: () => ({})
    },
    chatType: {
      type: String,
      default: msgType.chatType.SINGLE_CHAT
    }
  },

  // lifetimes
  created() {
	  
  },	
  mounted() {
  },
  beforeMount() {},

  moved() {},

  destroyed() {},

  onLoad() {
    this.setData({
      isIPX: getApp().globalData.isIPX
    });
    // let comps = this.$data.__comps__;
    // comps.main = this.selectComponent("#chatSuitMain");
    // comps.emoji = this.selectComponent("#chatSuitEmoji");
    // comps.image = this.selectComponent("#chatSuitImage"); 
  },

  methods: {
	  changeType:function(e){
		  if(e==1){
			  this.openEmoji();
		  }else if(e==2){
			  this.toggleRecordModal();
		  }else{
			  this.ishow =!this.ishow
		  }
	     
	  },
    // 事件有长度限制：仅限 26 字符
    toggleRecordModal() {
      this.$emit("tapSendAudio", null, {
        bubbles: true,
        composed: true
      });
    },

    sendVideo(){
    	this.$refs.chatSuitVideo.sendVideo();
    },
    openCamera() {
      // this.__comps__.image.openCamera()
       this.$refs.chatSuitImage.openCamera();
    },

    openEmoji() {
       this.$refs.chatSuitEmoji.openEmoji();
    },

    cancelEmoji() {
      this.$refs.chatSuitEmoji.cancelEmoji();
    },

    sendImage() {
      // this.__comps__.image.sendImage();
      this.$refs.chatSuitImage.sendImage();
    },
	//发送红包
	sendRed(){
		uni.navigateTo({
			url:"/pages/RedPage/HB_Hand?groupId="+this.username.groupId+'&chatType='+this.chatType+'&myName='+this.username.myName+"&your="+this.username.your+"&qid="+this.username.qid
		})
	},
	//发送红包
	sendMoney(){
		console.log(this.username)
		uni.navigateTo({
			url:"/pages/RedPage/Danhb?your="+this.username.your+'&myname='+uni.getStorageSync('name')
		})
	},
    sendLocation() {// this.data.__comps__.location.sendLocation();
    },

    emojiAction(evt) {
       this.$refs.chatSuitMain.emojiAction(evt.msg);
    }

  }
};
</script>
<style>
@import "./inputbar.css";
</style>